<!--
 * @Author: Jimssare 1424477176@qq.com
 * @Date: 2024-02-04 08:47:05
 * @LastEditors: Jimsare 1424477176@qq.com
 * @LastEditTime: 2025-10-11 11:53:43
 * @FilePath: \allitem\src\components\navigation\SideNav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup>
import { ref } from "@vue/reactivity";
import { RouterLink, RouterView } from "vue-router";

let navList = ref([
  { title: "首页", path: "/", name: "index",},
  { title: "SMART分析", path: "/SMART", name: "SMART",},
  { title: "MD文件显示", path: "/markdownToHtml", name: "mdTohtml", },
  { title: "barRace", path: "/barRace", name: "barRace", },
  { title: "元素周期表", path: "/pde", name: "periodicTableOfElement", },
  { title: "像素画图", path: "/gridsDraw", name: "gridsDraw", },
  { title: "常规元素周期表", path: "/ptoe", name: "periodicTable", },
  { title: "π默写测验", path: "/memoryOfPi", name: "memoryOfPi", },
  { title: "标准元素周期表", path: "/spde", name: "standardperidoicTableOfElement", },
  { title: "Vuetify", path: "/showVuetify", name: "VuetifyPage", },
  { title: "手撸下载组件", path: "/uploadDemo", name: "下载组件手写", },
  { title: "Vue3.0", path: "/vue3play", name: "Vue3.0特性测试", },
  { title: "智能家居方案", path: "/smartHousePlan", name: "智能家居方案", },
  { title: "大乐透选号", path: "/numberBall", name: "大乐透选号", },
]);
</script>

<template>
  <div class="nav-con" v-if="0">
    <RouterLink v-for="link in navList" :to="link.path" class="side-nav-item">{{link.title}}</RouterLink>
  </div>
  <el-menu default-active="/barRace" router>
    <el-menu-item v-for="link in navList" :index="link.path" >{{link.title}}</el-menu-item>
  </el-menu>
</template>

<style scoped>
.nav-con {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.side-nav-item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: block;
  border-bottom: 1px solid lightseagreen;
}
</style>